<template>
	<div class="mb16">
		<button class="gjsx" @click="showClick">高级筛选 <img src="../img/高级筛选.png" style="height: 15px;" /></button>
		<div class="ml1">
			<el-input type="text" maxlength="20" placeholder="输入地址/房号/电话/姓名" class="el-input" />
			<el-button type="primary"
				style="height: 40px; background-color: white;color: black; border: none;">搜索</el-button>
		</div>
	</div>
	<div class="xiala_2" v-show="showXiala">
		<form>
			<el-form-item label="车位区域" class="xz" style="width: 400px;">
				<el-select placeholder="请选择">
				</el-select>
			</el-form-item>
			<el-form-item label="车位标签" class="xz" style="width: 400px;">
				<el-select placeholder="请选择车位标签">
				</el-select>
			</el-form-item>
			<el-form-item label="车位状态" class="xz" style="width: 400px;">
				<el-select placeholder="请选择车位类型">
				</el-select>
			</el-form-item>


			<el-button class="btn1_3">重置</el-button><el-button class="btn2_3">查询</el-button>
		</form>
	</div>
	<div class="buttom">
		<div class="b_top">
			<el-button class="btn3" @click="AddCarwei">添加车位</el-button>
			<el-popover placement="bottom" :width="200" trigger="hover" class="el-popover">
				<template #reference>
					<el-button class="m-2">更多</el-button>
				</template>

				<div slot="content" style="margin: 0px;">
					<ul class="u1">
						<li>批量导入</li>
						<li>导出数据</li>
						<li>批量修改房屋信息</li>
					</ul>
				</div>
			</el-popover>
		</div>
		<el-table :data="data.space" style="width: 100%">
			<el-table-column fixed="left" type="selection" width="55" />
			<el-table-column prop="yardname" label="车位区域" width="200" />
			<el-table-column prop="number" label="车位编号" width="200" />
			<el-table-column prop="type" label="车位类型" width="200" />
			<el-table-column prop="area" label="面积" width="200" />
			<el-table-column prop="nameandphone" label="产权人信息" width="260" />
			<el-table-column prop="carnumber" label="登记车辆数" width="200" />
			<el-table-column prop="associatedhousing" label="关联房屋" width="260" />
			<el-table-column fixed="right" label="操作" min-width="180">
				<template #default="{ row }">
					<el-button link type="primary" size="small" @click="">
						车辆登记
					</el-button>
					<el-button link type="primary" size="small" @click="bianji(row.parkingid)">编辑</el-button>
					<el-button link type="primary" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog v-model="centerDialogVisible" title="" :width="'300px'" class="el-dia">
			<form>
				车位编号:<el-input placeholder="请输入停车场"></el-input><br />
				车位类型:<el-input placeholder="请输入停车场"></el-input><br />
				车位面积:<el-input placeholder="请输入停车场"></el-input>
			</form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="updatacarwei()">确定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
	<div class="demo-pagination-block">
		<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[20, 30, 40, 50]"
			:size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
			:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</div>
</template>

<script setup lang="ts">
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		ElTable
	} from 'element-plus';
	import {
		useRouter
	} from 'vue-router';
	import $http from '../router/AxiosApi.js';
	import type { ComponentSize } from 'element-plus'
	// 定义响应式变量
	const showXiala = ref(false);
	const router = useRouter()
	const centerDialogVisible = ref(false);

	let parkingid = "";

	const bianji = (id) => {
		centerDialogVisible.value = true;
		parkingid = id;
		console.log(parkingid)
	}


	// 定义函数来切换显示状态
	const showClick = () => {
		console.log("aaa");
		showXiala.value = !showXiala.value;
	};

	const AddCarwei = () => {
		router.push({
			name: 'AddCarwei'
		});
	}


	const data = reactive({
		space: []
	})
	const page = ref(1)
	const pageSize = ref(12)
	const total = ref(0)
	const size = ref<ComponentSize>('default')
	const currentPage4 = ref(0)
	const pageSize4 = ref(0)
	const background = ref(false)
	const disabled = ref(false)
	const inputValue = ref('');
	const handleSizeChange = (val : number) => {
		pageSize.value = val;
		loadspace(page, pageSize)
	}
	const handleCurrentChange = (val : number) => {
		pageSize.value = val;
		loadspace(page, pageSize)
	}
	const form = reactive({
		id: '',
		yardname: '',
		number: '',
		type: '',
		area: '',
		associatedhousing: '',
		nameandphone:'',
		carnumber:'',
		parkingid:''
	})
	onMounted(() => {
		loadspace(page, pageSize)
	})
	const loadspace = (parkpage, size) => {
		$http.post(`Parking/selectAll?currentPage=${page.value}&pageSize=${size.value}`,form)
			.then((res) => {
				console.log(res.data)
				data.space = res.data.data
				console.log(data.space)
			})
	}
</script>

<style scoped>
	.example-showcase .el-dropdown-link {
		cursor: pointer;
		color: var(--el-color-primary);
		display: flex;
		align-items: center;
	}

	.xiala_2 {
		background-color: white;
		width: 1568px;
		height: 180px;
		overflow: auto;
		padding: 15px;
		margin-bottom: 10px;
	}

	.xz {
		width: 300px;
		float: left;
		margin-bottom: 0;
		margin-right: 32px;
		height: 56px;
		align-items: center;
		text-align: left;
	}

	.text-center {
		text-align: center;
	}

	.btn1_3 {
		position: relative;
		bottom: -100px;
		right: 630px;
		width: 100px;
		height: 40px;
		color: #7e8081;
		background-color: #fafafa;
		border: none;
		font-size: 14px;
		padding: 10px;
	}

	.btn2_3 {
		position: relative;
		bottom: -100px;
		right: 600px;
		width: 100px;
		height: 40px;
		color: #fff;
		background-color: #00c36d;
		border-color: #00c36d;
		font-size: 14px;
	}

	.gjsx {
		background-color: white;
		padding: 10px 15px;
	}

	.mb16 {
		margin-bottom: 16px;
		display: -webkit-box;
		display: flex;
		justify-content: flex-end;
		width: 1440px;
	}

	.ml1 {
		width: 300px;
		border: none;
		margin-left: 10px;
		display: inline-table;
	}

	.el-input {
		width: 240px;
		height: 40px;
		line-height: 40px;
		border: none;
	}

	.u1 {
		margin: 0px;
		padding: 0px;
	}

	.u1>li {
		list-style: none;
		line-height: 20px;
		height: 25px;
		line-height: 190%;
		text-align: left;
		padding: 5px 10px;
		cursor: pointer;
	}

	.u1>li:hover {
		background-color: #d3ffe2;
		/* 鼠标悬浮时的背景色 */
		color: #00bd00;
	}

	.el-popover {
		padding: 0px !important;
	}

	.buttom {
		background-color: white;
		padding: 10px;
		border-radius: 10px;
	}

	.btn3 {
		width: 100px;
		height: 40px;
		color: #fff;
		background-color: #00c36d;
		border-color: #00c36d;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.b_top {
		display: flex;
		justify-content: space-between;
	}

	.m-2 {
		padding: 10px 20px;
		align-items: center;
		background-color: #fafafa;
		border: none;
		height: 40px;
		width: 80px;

	}

	.cell {
		text-align: end;
	}
</style>